<template>
  <div class="notice" ref="cover">
    <div class="content">
      <h1 class="title">河北家乡棋牌</h1>
      <div class="content_info">
        <p>为响应国家相关主管部门近期发文要求净化网络环境，规范游戏市场的号召，根据相关规定，代理商{{beginTime}}起需要进行实名认证后才可使用代理商后台功能，请您及时进行实名制认证，感谢您的支持与理解！</p>
        <p>我司将坚决拥护净网行动，愿与广大用户一起营造健康绿色的娱乐环境！</p>
        <div class="info_footer">
          <p>河北家乡棋牌</p>
          <p>2018年5月5日</p>
        </div>
      </div>
      <button class="disappear" @click="knowClick">知道了</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["beginTime", "tipsTime"],
  methods: {
    knowClick() {
      this.$refs.cover.style.display = "none";
    }
  }
};
</script>


<style scoped>
.notice {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 100;
  /* display: none; */
}
.content {
  background-color: #fff;
  width: 90%;
  height: 85%;
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.content_info {
  padding: 0.3rem 0.2rem;
  position: relative;
}
.info_footer {
  position: absolute;
  right: 0.2rem;
  bottom: -1.5rem;
}
.content .info_footer p {
  padding: 0.05rem 0;
}
.content p {
  padding: 0.1rem 0;
  text-indent: 2em;
}
.title {
  background-color: #3cc0ff;
  color: #fff;
  font-size: 0.42rem;
  line-height: 1rem;
  text-align: center;
}
.disappear {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 0.36rem;
  text-align: center;
  color: var(--btn-color);
  line-height: 1rem;
  border-top: 0.01rem solid var(--border-color);
}
.notice_content {
  overflow-y: auto;
}
</style>

